<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<style type="text/css">
			#list1>li {
				width: 50px;
				height: 50px;
				background-color: blue;
				color: white;
				margin: 5px;
			}

			#demo1 {
				cursor: default;
			}

			#demo2 {}

			#demo3 {
				cursor: alias;
			}

			#demo4 {
				cursor: all-scroll;
			}

			#demo5 {
				cursor: auto;
			}

			#demo6 {
				cursor: cell;
			}

			#demo7 {
				cursor: col-resize;
			}

			#demo8 {
				cursor: context-menu;
			}

			#demo9 {
				cursor: copy;
			}

			#demo10 {
				cursor: crosshair;
			}

			#demo11 {
				cursor: pointer;
			}

			#demo12 {
				cursor: move;
			}

			#demo13 {
				cursor: e-resize;
			}

			#demo14 {
				cursor: ne-resize;
			}

			#demo15 {
				cursor: nw-resize;
			}

			#demo16 {
				cursor: n-resize;
			}

			#demo17 {
				cursor: se-resize;
			}

			#demo18 {
				cursor: sw-resize;
			}

			#demo19 {
				cursor: s-resize;
			}

			#demo20 {
				cursor: w-resize;
			}

			#demo21 {
				cursor: text;
			}

			#demo22 {
				cursor: wait;
			}

			#demo23 {
				cursor: help;
			}

			#list2 li {
				position: relative;
			}

			#list2 li>div {
				background-color: pink;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
			}

			#demo31>div {
				opacity: 0.5;
			}

			#demo32>div {
				opacity: 0.5;
				pointer-events: none;
			}

			#demo33>input {
				opacity: 0;
			}

			#demo33>div {
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<section>
			<h3>鼠标样式</h3>
			<ul class="list wrap center m-5" id="list1">
				<li id="demo1">default</li>
				<!-- <li id="demo2"></li> -->
				<li id="demo3">alias</li>
				<li id="demo4">all-scroll</li>
				<li id="demo5">auto</li>
				<li id="demo6">cell</li>
				<li id="demo7">col-resize</li>
				<li id="demo8">context-menu</li>
				<li id="demo9">copy</li>
				<li id="demo10">crosshair</li>
				<li id="demo11">pointer</li>
				<li id="demo12">move</li>
				<li id="demo13"></li>
				<li id="demo14"></li>
				<li id="demo15"></li>
				<li id="demo16"></li>
				<li id="demo17"></li>
				<li id="demo18"></li>
				<li id="demo19"></li>
				<li id="demo20"></li>
				<li id="demo21">text</li>
				<li id="demo22">wait</li>
				<li id="demo23">help</li>
			</ul>
		</section>
		<section>
			<h3>穿透</h3>
			<ul class="list wrap center m-5" id="list2">
				<li id="demo31">
					<input type="file" />
					<div>正常不穿透</div>
				</li>
				<li id="demo32">
					<input type="file" />
					<div>穿透</div>
				</li>
				<li id="demo33">
					<div>隐藏</div>
					<input type="file" />
				</li>
			</ul>
		</section>
	</body>
</html>
